<script setup lang="ts">
import { reactive, ref } from "vue"
const name = 'One'
const msg = "Hello World"
const count = 10
const price = 2.5
const isMarry: boolean = false
const money = 0 // 存款
const age = 20
const skills = "写代码"

// 声明函数
const getContent = () => {
  return "太甜了"
}
const clickFn = (a: number, b: number, c: number) => {
  const d = a + b + c
  alert('点我干嘛 ' + d)
}
const changeValue = (event: Event) => {
  const inputDom = event.target as HTMLInputElement
  console.log('数值改变', inputDom.value)
}
// 键盘事件对象 取自MDN-官方的W3c的标准文档
const enterClick = (event: KeyboardEvent) => {
  const obj = event as KeyboardEvent
  // const inputDom = event.target as HTMLInputElement
  if (event.key === 'Enter') {
    alert('点击了回车')
  }
}

const person = reactive<{
  name: string,
  age: number,
  sex?: "男" | "女",
  belong: 1 | 0
}>({
  name: '郁清棠',
  age: 28,
  sex: "女",
  belong: 0
})
const changeTP = () => {
  person.belong = 1
}
const isMarried = ref(false)
const people = ref<{
  name: string,
  age: number
  sex: "男" | "女"
  isMarried: boolean
}>({
  name: '程湛兮',
  age: 25,
  sex: '女',
  isMarried: false
})
const changeSelf = () => {
  people.value.isMarried = true
}
const weather = ref("晴转多云")

const feeling = ref(`<h2><strong style="color:blue"> 我的心情跌落到谷底-我emo了</strong></h2>`)

// 变脸
const changeFace = () => {
  feeling.value = `
     <h1 style="color: red">
        我发怒了
     </h1>`
}
</script>

<template>
  <div class="container">
    {{ name }} <br>
    {{ age + 2 }}
    <!-- 插值表达式 -->
    {{ (msg + "Vue3").split("").reverse().join("") }}
    <p>总价：{{ count * price }}</p>
    <p>年龄：{{ `${age}岁` }}</p>
    <p>婚姻状态: {{ isMarry ? "已婚" : "未婚" }}</p>
    <p>存款状态: {{ money || "我是富婆" }}</p>
    <p>技能：{{ skills }}</p>
    <p>函数调用: {{ getContent() }} </p>
    <!-- <button v-on:click="clickFn(1, 2, 3)">测试</button> -->
    <!-- 完整写法v-on:事件名="方法名" -->
    <!-- 语法糖的写法 @click -->
    <button @click="clickFn(1, 2, 3)">相加数字</button><br>
    <!-- change:失焦后执行 input:值改变就执行 -->
    <input type="text" @input="changeValue" @keydown="enterClick">

    <h2>响应式数据Reactive</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
    <p>属性:{{ person.belong }}</p>
    <button @click=" person.belong = 1">改变属性-直接改</button>
    <button @click="changeTP" style="margin-left: 10px;">改变属性-函数</button>

    <h2>响应式数据Ref-简单数据类型</h2>
    <p>婚姻状态:{{ isMarried ? '已婚' : '努力追求中...' }}</p>
    <button @click="isMarried = true">婚姻状态</button>
    <h2>响应式数据Ref-负载数据类型</h2>
    <p>姓名:{{ people.name }}</p>
    <p>年龄:{{ people.age }}</p>
    <p>性别:{{ people.sex }}</p>
    <p>是否结婚:{{ people.isMarried ? '已婚' : '努力追求中...' }}</p>
    <button @click="changeSelf">点击嗑糖</button>

    <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="feeling"></div>
    <button @click="weather = '狂风暴雨'">变天</button>
    <button @click="changeFace" style="margin-left: 20px;">变脸</button>
    <div></div>

  </div>

</template>

<style scoped>
* {
  margin: 0px;
  padding: 0;
}

/* scoped 添加 防止污染代码 */
.container {
  width: 100vw;
  height: 100vh;
  /* background-color: pink; */
  font-size: 30px;
  font-weight: 600;
  color: coral;
}
</style>
